<template>
  <div id="art-box">
    <!-- 富文本编辑器 -->
    <div class="module" id="addArticle">
      <div id="editor-box">
        <UEditor @getContent="getContent"></UEditor>
      </div>
      <div id="control-box">
        <Button type="success" ghost title="发布到网站" @click="checkInfo(1)">发布</Button>
        <Button type="error" ghost title="保存到草稿箱" @click="checkInfo(2)">暂存</Button>
      </div>
    </div>

    <!-- 右侧设置栏 -->
    <div id="set-art">
      <!-- 展开按钮 -->
      <div class="set-btn" @click="showFlag" :style="showStyle">
        <Icon type="ios-arrow-back" v-show="!showSet"/>
        <Icon type="ios-arrow-forward" v-show="showSet"/>
      </div>

      <!-- 提示 -->
      <Modal v-model="publishFlag" title="提示" @on-ok="publish" width="300">
        <p>是否确认发表？</p>
      </Modal>

      <!-- 加载动画 -->
      <Spin fix v-show="loadingImg">
        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>

      <!-- 表单 -->
      <div class="module" v-show="showSet" style="min-width:420px">
        <div class="info-item">
          <span class="tips">分类：</span>
          <Cascader v-model="typeVal" :data="typeList" trigger="hover" style="display:inline-block;width:300px;"></Cascader>
        </div>
        <div class="info-item">
          <span class="tips"></span>
          <Upload
            action="//jsonplaceholder.typicode.com/posts/"
            style="display:inline-block;width:300px;border:0"
            :before-upload="startUp"
            type="drag"
          >
            <div style="padding: 20px 0;position:relative">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击或拖拽上传图片</p>
              <div id="img-see" v-if="file">
                <img v-show="file" :src="global.serviceUrl + file" title="点击取消" @click.stop="cancel">
              </div>
            </div>
          </Upload>
        </div>
        <div class="info-item">
          <span class="tips">标题：</span>
          <Input v-model="title" placeholder="请输入标题" clearable style="width: 300px"/>
        </div>
        <div class="info-item">
          <span class="tips">简介：</span>
          <Input
            v-model="introduct"
            clearable
            style="width: 300px"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="请输入简介"
          ></Input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UEditor from "@/components/UEditor";
import { addArticle, uploads, getTypeSelect } from "@/config/api";
import { mapState } from "vuex";
export default {
  name: "Add-view",
  data() {
    return {
      status: '1',//发布状态 2、暂存 3、删除
      typeList: [], //分类数据
      typeVal:[],//选择分类
      publishFlag: false,
      loadingImg: false, //动态加载
      title: "", //标题
      introduct: "", //简介
      content: "", //文章内容
      showSet: false,
      showStyle: {
        left: "-20px",
        borderRadius: "5px 0 0 5px"
      },
      value: [],
      file: "", //文件对象
      data: "" //分类列表
    };
  },
  components: {
    UEditor
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    getTypeSelect(true)
      .then(result => {
        this.typeList = result.data;
      })
      .catch(err => {
        throw err;
      });
  },
  methods: {
    showFlag() {
      this.showSet = !this.showSet; //切换设置菜单
      if (this.showSet) {
        this.showStyle.left = "0";
        this.showStyle.borderRadius = "0 5px 5px 0";
      } else {
        this.showStyle.left = "-20px";
        this.showStyle.borderRadius = "5px 0 0 5px";
      }
    },
    getContent(content) {
      this.content = content; //文章内容获取
    },
    //校验文章信息
    checkInfo(status) {
      this.status = status;//发布或暂存
      if (this.typeVal.length == '0') {
        this.$Message.warning("请选择分类！");
        return;
      }
      if (this.file == '') {
        this.$Message.warning("请上传图片！");
        return;
      }
      if (this.title == "") {
        this.$Message.warning("标题不能为空！");
        return;
      }
      if (this.introduct == "") {
        this.$Message.warning("简介不能为空！");
        return;
      }
      if (this.content == "") {
        this.$Message.warning("内容不能为空！");
        return;
      }
      this.publishFlag = true;
    },
    publish() {
      const $this = this;
      const userInfo = this.userInfo; //用户信息
      const type = this.typeVal[2];//类型id
      const status = this.status;//暂存或发布
      addArticle(
        this.file,
        this.title,
        this.introduct,
        this.content,
        userInfo.id,
        type,
        status
      )
        .then(result => {
          if (result.data.affectedRows == 1) {
            $this.$Message.success("发表成功！");
            //重置编辑器
            $this.title = '';
            $this.introduct = '';
            $this.content = '';
            $this.file = '';
            $this.typeVal = [];
          } else {
            $this.$Message.error("发表失败！");
          }
        })
        .catch(err => {
          $this.$Message.error("发表失败！");
        });
    },
    //上传图片
    startUp(file) {
      const $this = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        $this.loadingImg = true; //开启加载
        uploads(this.result, "lists")
          .then(result => {
            if (result.data) {
              $this.loadingImg = false; //关闭加载
              $this.$Message.success("上传成功！");
              $this.file = result.data;
            }
          })
          .catch(error => {
            $this.loadingImg = false; //关闭加载
            $this.$Message.error("上传失败！");
          });
      };
      return false;
    },
    cancel() {
      this.file = "";
    }
  }
};
</script>
<style scoped>
#art-box {
  height: 100%;
  display: flex;
  flex-direction: row;
}
#addArticle {
  overflow-y: auto;
  background-color: #fff;
  min-width: 500px;
}
#addArticle::-webkit-scrollbar {
  width: 0;
}
.module {
  flex: 1;
  border-radius: 2px;
  padding: 10px;
  margin: 5px;
}
#editor-box {
  min-height: 600px;
}
/* 文章设置 */
#set-art {
  width: auto;
  position: relative;
  background-color: #fff;
}
.set-btn {
  position: absolute;
  top: 45%;
  background-color: rgba(0, 0, 0, 0.2);
  line-height: 100px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}
#control-box {
  text-align: center;
}
/* 侧边 */
.info-item {
  padding: 10px 0;
}
.tips {
  display: inline-block;
  width: 80px;
  text-align: right;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}
#img-see {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#img-see > img {
  width: 100%;
  height: 100%;
}
</style>


